import React from 'react'
// import React, { useEffect } from 'react'
// import { useDispatch, useSelector } from 'react-redux'
// import { useHistory } from 'react-router-dom'

// import React, { Component } from 'react'
// import { connect } from 'react-redux'
// import { withRouter } from 'react-router-dom'

// import actionCreator from '../actionCreator'

import CookBookUi from '../ui/CookBookUi'

// 装饰器
// @connect(
//   (state) => {
//     // console.log( state)
//     return {
//       list: state.cookbook.list
//     }
//   },
//   // (state) => ({})
//   (dispatch) => ({
//     loadData() {
//       // 装饰器 需要装react-thunk 才能这样使用
//       dispatch(actionCreator.loadDataAsync())
//     }
//   })
// )
// @withRouter
// class CookBook extends Component {
//   handleGoToDetail = (title) => {
//     return () => {
//       let { history } = this.props
//       history.push('/detail', { title, from: '/home' })
//     }
//   }

//   render() {
//     return (
//       <CookBookUi 
//         list={this.props.list}
//         onGoToDetail={this.handleGoToDetail}
//       ></CookBookUi>
//     )
//   }

//   componentDidMount() {
//     this.props.loadData()
//     // 在这里获取不到数据，因为是异步的
//   }

//   componentDidUpdate() {
//     // console.log(this.props.list)
//   }
// }

import useGetState from './useGetState'
import useGoToDetail from './useGoToDetail'

const CookBook = (props) => {

  let { state } = useGetState()
  
  let { handleGoToDetail } = useGoToDetail()
  
  return (
    <CookBookUi 
      // list={store.getState().cookbook.list}
      // list={state.list}
      list={state.get('list')}
      onGoToDetail={handleGoToDetail}
    ></CookBookUi>
  )
}

export default CookBook
